<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh">
      <!-- 手机号 -->
      <view class="phone">
        <view>
          联系方式
          <text style="color: #ff0000">*</text>
        </view>
        <input type="text" placeholder="请输入联系方式" style="text-align: right" />
      </view>
      <!-- 上传正面身份证 -->
      <view class="cardfront">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">
          上传身份证人像面
          <text style="color: red">*</text>
        </view>
        <image src="../../static/icon/userfront.png" mode="aspectFill" style="width: 240rpx; height: 160rpx; margin-top: 30rpx"></image>
      </view>
      <!-- 上传反面身份证  -->
      <view class="cardfront">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">
          上传身份证国徽面
          <text style="color: red">*</text>
        </view>
        <image src="../../static/icon/userback.png" mode="aspectFill" style="width: 240rpx; height: 160rpx; margin-top: 30rpx"></image>
      </view>
      <!-- 姓名 -->
      <view class="phone">
        <view>
          姓名
          <text style="color: #ff0000">*</text>
        </view>
        <input type="text" placeholder="请输入姓名" style="text-align: right" />
      </view>
      <!-- 性别 -->
      <view class="phone">
        <view>
          性别
          <text style="color: #ff0000">*</text>
        </view>
        <view style="display: flex; align-items: center">
          <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #999999">请选择</view>
          <uni-icons type="right" size="20" color="#888888"></uni-icons>
        </view>
      </view>
      <!-- 身份证号 -->
      <view class="phone">
        <view>
          身份证号
          <text style="color: #ff0000">*</text>
        </view>
        <input type="text" placeholder="请输入" style="text-align: right" />
      </view>
      <!-- 身份选择 -->
      <view class="phone">
        <view>
          身份选择
          <text style="color: #ff0000">*</text>
        </view>
        <view style="display: flex; align-items: center">
          <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #999999">请选择</view>
          <uni-icons type="right" size="20" color="#888888"></uni-icons>
        </view>
      </view>
      <!-- 上传毕业证 -->
      <view class="cardfront">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">
          上传毕业证/学生证
          <text style="color: red">*</text>
        </view>
        <image src="../../static/icon/biyezheng.png" mode="aspectFill" style="width: 240rpx; height: 160rpx; margin-top: 30rpx"></image>
      </view>
      <!-- 上传毕业证 -->
      <view class="cardfront">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">
          上传教师资格证
          <text style="color: red">*</text>
        </view>
        <image src="../../static/icon/jiaozi.png" mode="aspectFill" style="width: 240rpx; height: 160rpx; margin-top: 30rpx"></image>
      </view>
      <!-- 教龄 -->
      <view class="phone">
        <view>
          教龄
          <text style="color: #ff0000">*</text>
        </view>
        <input type="text" placeholder="请填写教学年龄" style="text-align: right" />
      </view>
      <!-- 请选则授课科目 -->
      <view class="phone">
        <view>
          请选择授课科目
          <text style="color: #ff0000">*</text>
        </view>
        <view style="display: flex; align-items: center">
          <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #999999">请选择</view>
          <uni-icons type="right" size="20" color="#888888"></uni-icons>
        </view>
      </view>
      <!--职称-->
      <!-- 上传职称证 -->
      <view class="cardfront">
        <view style="display: flex; align-items: center; justify-content: space-between; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">
          <view>职称</view>
          <input type="text" placeholder="请输入" style="text-align: right" />
        </view>
        <image src="../../static/icon/zhicheng.png" mode="aspectFill" style="width: 240rpx; height: 160rpx; margin-top: 30rpx"></image>
      </view>
      <!-- 个人照片 -->
      <view class="cardfront">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">
          个人照片
          <text style="color: red">*</text>
        </view>
        <image src="../../static/icon/avatar.png" mode="aspectFill" style="width: 240rpx; height: 160rpx; margin-top: 30rpx"></image>
      </view>
      <!-- 个人视频 -->
      <view class="cardfront">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">
          个人视频

          <text style="color: red">*</text>
          <text style="font-weight: 500; font-size: 24rpx; color: #999999">个人视频上传要求</text>
        </view>
        <image src="../../static/icon/uservideo.png" mode="aspectFill" style="width: 240rpx; height: 160rpx; margin-top: 30rpx"></image>
      </view>
      <!-- 同意协议单选框 -->
      <view style="box-sizing: border-box; padding: 0 40rpx; font-weight: 500; font-size: 24rpx; background-color: #fff">
        <label class="radio">
          <radio :checked="agree" @click="agree = !agree" style="transform: scale(0.7)" color="#3553E8" />
          我已同意
          <text style="color: #3553e8">《教师接单协议》</text>
          和
          <text style="color: #3553e8">《教师入住协议》</text>
        </label>
      </view>
      <!-- 提交按钮 -->
      <view class="submit">提交</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      agree: false
    };
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  background-color: #fff;
  .phone {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 750rpx;
    height: 120rpx;
    padding: 40rpx;
    background: #ffffff;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
  }
  .cardfront {
    box-sizing: border-box;
    width: 750rpx;
    height: 300rpx;
    padding: 40rpx;
    background: #ffffff;
  }
  .submit {
    box-sizing: border-box;
    width: 670rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
    margin-top: 88rpx;
    margin-left: 40rpx;
    background: #3553e8;

    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
</style>
